<template>
  <div class="sensor-container">
    <div class="top">
      <div class="content">
        <div class="num">{{ current_info.number }}</div>
        <div
          class="info-box"
          :style="
            'background-color:' +
            current_info.background_color +
            ';border-color:' +
            current_info.border_color +
            ';'
          "
        >
          <div class="txt">{{ current_info.describe }}</div>
          <div class="level">{{ current_info.level_text }}</div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="active-point" :style="'left:' + current_level + '%;'"></div>
      <div class="level" v-for="(item, index) in level_list" :key="index">
        <div
          class="block"
          :style="'background-color:' + item.color + ';'"
        ></div>
        <div class="txt">{{ item.txt }}</div>
      </div>
    </div>
    <div class="bottom">
      <div class="item" v-for="(item, index) in datalist" :key="index">
        <div class="val">{{ item.val }}</div>
        <div class="key">{{ item.key }}</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      //层级
      level_list: [
        {
          id: 1,
          color: "#36c64b",
          txt: "优",
        },
        {
          id: 2,
          color: "#ebea8d",
          txt: "良",
        },
        {
          id: 3,
          color: "#f9c40d",
          txt: "轻度",
        },
        {
          id: 4,
          color: "#ef9236",
          txt: "中度",
        },
        {
          id: 5,
          color: "#c46305",
          txt: "中度",
        },
        {
          id: 6,
          color: "#c22626",
          txt: "严重",
        },
      ],
      //属性数据
      datalist: [
        {
          val: "30%",
          key: "温度",
        },
        {
          val: "50%",
          key: "湿度",
        },
        {
          val: "51LUX",
          key: "光照度",
        },
        {
          val: "ug/m",
          key: "PM10",
        },
        {
          val: "37.0ug/m",
          key: "PM2.5",
        },
        {
          val: "51LUX",
          key: "噪声",
        },
      ],
      //当前层级
      current_level: 0,
      //当前状态
      current_info: {
        level_text: "良",
        number: 0,
        describe: "空气质量",
        background_color: "",
        border_color: "",
      },
    };
  },
};
</script>
  
  <style lang="scss">
.sensor-container {
  padding: 0 30px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top,
  .middle,
  .bottom {
    flex: 1 1 33.33333%;
  }
  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    .content {
      display: flex;
      justify-self: center;
      align-items: center;
      .num {
        font-size: 40px;
        color: #ffffff;
      }
      .info-box {
        padding: 2px 6px;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 16px;
        background-color: #36c64b;
        border: 1px solid #84fc96;
        .txt {
          width: 30px;
          font-size: 14px;
          color: #ffffff;
        }
        .level {
          font-size: 24px;
          color: #ffffff;
        }
      }
    }
  }
  .middle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    .level {
      flex: 1 1 16.666666666666668%;
      text-align: center;
      .block {
        height: 10px;
        background-color: #36c64b;
      }
      .txt {
        margin-top: 8px;
        font-size: 12px;
        color: #ffffff;
      }
    }
    .active-point {
      position: absolute;
      top: 0;
      margin-left: -3px;
      border: 6px solid transparent;
      border-top-color: #ffffff;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 14px;
    .val {
      color: #0193de;
    }
    .key {
      color: #ffffff;
    }
  }
}
</style>